<template>
	<view class="box">
		<!-- 头像上方 -->
		<view class="userinfo" @click="userInfo">
			<view class="name">
				{{name.slice(-2)}}
			</view>
			<view class="msg-tip">
				<view class="msg-name">
					Hello，{{name}}
				</view>
				<view class="msg-chickentext">
					{{dept}}/{{posts}}
				</view>
			</view>
			<view class="right-icon" />
		</view>
		<!-- 下面的主体 -->
		<view class="bottom-center">
			<u-row customStyle="margin-bottom: 10px" class="bg-purple" @click="changePass">
				<u-col span="6">
					<view class="bg-purple-right">
						<image src="https://pc.chinaonebuild.com/images/user/suo.png" mode="" class="img"></image>
						<span class="span">登录密码修改</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="bg-purple-left">
						<image src="https://pc.chinaonebuild.com/images/user/left.png" mode="" class="img"></image>
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px" class="bg-purple" @click="unitInvoice">
				<u-col span="6">
					<view class="bg-purple-right">
						<image src="https://pc.chinaonebuild.com/images/user/fapiao.png" mode="" class="img"></image>
						<span class="span">单位发票抬头</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="bg-purple-left">
						<image src="https://pc.chinaonebuild.com/images/user/left.png" mode="" class="img"></image>
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px" class="bg-purple" @click="about">
				<u-col span="6">
					<view class="bg-purple-right">
						<image src="https://pc.chinaonebuild.com/images/user/guanyu.png" mode="" class="img"></image>
						<span class="span">关于我们</span>
					</view>
				</u-col>
				<u-col span="6">
					<view class="bg-purple-left">
						<text class="edition">版本{{versions}}</text>
						<image src="https://pc.chinaonebuild.com/images/user/left.png" mode="" class="img imgs"></image>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-button type="primary" text="退出登录" color="#2289FF" @click="logOut"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				name: '',
				// 部门
				dept: '',
				// 职务
				posts: '',
				remove: false,
				versions: ''
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					console.log('设备信息:', res);
					this.versions = res.appVersion
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				},
				complete: () => {
					console.log('获取系统信息完成');
				}
			});
		},
		methods: {
			// 获取用户详情的信息
			getUserEdit() {
				this.$api.userInfo().then(res => {
					if (res.code == 200) {
						let {
							dept,
							roles
						} = res.user
						uni.setStorageSync('USER_EDIT', res)
						this.name = res.user.nickName
						this.dept = dept.deptName
						this.posts = roles[0].roleName
						this.remove = false
					} else {
						this.remove = true
					}
				}).catch((res) => {
					this.remove = true
				})
			},
			// 获取用户详情的信息
			/* getUserEdit(id) {
				this.$api.systemUser({}, `/${id}`).then(res => {
					if (res.code == 200) {
						let {
							data,
							postIds,
							posts
						} = res
						uni.setStorageSync('USER_EDIT', res)
						this.name = data.nickName
						this.dept = data.dept.deptName
						this.posts = posts.filter(v => v.postId == postIds[0]).length ? posts.filter(v => v
							.postId == postIds[0])[0].postName : ''
						this.remove = false
					} else {
						this.remove = true
					}
				}).catch((res) => {
					this.remove = true
				})
			}, */
			// 获取用户的信息
			getUserInfo() {
				this.$api.userInfo().then(res => {
					uni.setStorageSync('USER', res)
					if (res.code !== 200) return
					this.getUserEdit()
					// this.getUserEdit(res.user.userId)
				})
			},
			// 登出登录
			logOut() {
				uni.showModal({
					title: '提示',
					content: '确认退出当前帐号?',
					success: (res) => {
						if (res.confirm) {
							this.$store.commit('SET_TOKEN', '')
							this.$store.commit('SET_MENU', [])
							this.$store.commit('SET_USERNAME', '')
							this.$store.commit('SET_NICKNAME', '')
							this.$store.commit('SET_USERID', '')
							uni.removeStorageSync('SET_TOKEN');
							uni.removeStorageSync('SET_MENU')
							uni.removeStorageSync('SET_ROLES')
							uni.removeStorageSync('userid')
							uni.removeStorageSync('username')
							uni.removeStorageSync('nickname')
							uni.removeStorageSync('menu')
							uni.reLaunch({
								url: '/pagesA/public/login',
							});
						}
					}
				});
			},
			// 点击头像
			userInfo() {
				if (this.remove) {
					uni.showToast({
						icon: 'none',
						title: '没有权限！请联系管理员授权！',
					})
					return
				}
				uni.navigateTo({
					url: '/pagesA/my/information?remove=' + this.remove,
					animationType: 'fade-in',
					animationDuration: 200
				})
			},
			// 点击修改密码
			changePass() {
				uni.navigateTo({
					url: '/pagesA/my/changePassword',
					animationType: 'fade-in',
					animationDuration: 200
				})
			},
			// 点击单位发票抬头
			unitInvoice() {
				uni.navigateTo({
					url: '/pagesA/my/unitInvoice',
					animationType: 'fade-in',
					animationDuration: 200
				})
			},
			// 点击操作指南
			operation() {
				uni.navigateTo({
					url: '/pagesA/my/operation',
					animationType: 'fade-in',
					animationDuration: 200
				})
			},
			// 点击关于我们
			about() {
				uni.navigateTo({
					url: '/pagesA/my/about',
					animationType: 'fade-in',
					animationDuration: 200
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		overflow-x: hidden;
		// height: 90vh;
	}

	.img {
		width: 48rpx !important;
		height: 48rpx !important;
	}

	.span {
		margin-left: 20rpx;
	}

	::v-deep .u-button {
		// width: 95% !important;
		position: fixed !important;
		bottom: 111rpx !important;
		// left: 10rpx;
		// right: 10rpx;
		width: 686rpx !important;
		height: 92rpx !important;
		font-size: 28rpx !important;
		left: 28rpx !important;
		bottom: 200rpx !important;
	}

	::v-deep .u-row {
		color: #303133;
		font-size: 28rpx;
		margin: 0rpx 28rpx;
		border-bottom: 0.5rpx solid #e8edf5;
		padding: 28rpx 0rpx;

		.bg-purple-right {
			display: flex;
			align-items: center;
		}

		.bg-purple-left {
			text-align: right;

			.edition {
				margin-right: 20rpx;
				color: #606266;
				font-size: 24rpx;
			}

			.img {
				width: 37rpx;
				height: 37rpx;
			}

			.imgs {
				vertical-align: -6.5rpx;
			}
		}
	}

	.userinfo {
		width: 100%;
		height: 340rpx;
		background-image: url(https://pc.chinaonebuild.com/images/Subtract2.png);
		background-size: 100% 100%;
		color: white;
		position: relative;

		.name {
			width: 148rpx;
			height: 148rpx;
			text-align: center;
			line-height: 148rpx;
			font-size: 40rpx;
			font-weight: 500;
			background-image: url(https://pc.chinaonebuild.com/images/range.png);
			background-size: 100% 100%;
			position: absolute;
			top: 50%;
			left: 48rpx;
			overflow: hidden;
			transform: translateY(-50%);
		}

		.msg-tip {
			position: relative;
			top: 35%;
			left: 226rpx;

			.msg-name {
				font-size: 36rpx;
			}

			.msg-chickentext {
				margin-top: 16rpx;
				font-size: 28rpx;
				width: 441rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* 这里是超出几行省略 */
				overflow: hidden;
				line-height: 34rpx;
			}
		}

		.right-icon {
			width: 13.33rpx;
			height: 23.33rpx;
			background-image: url(https://pc.chinaonebuild.com/images/goin.png);
			background-size: 100% 100%;
			position: absolute;
			right: 62.17rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>